// Vue 的生命周期是指 Vue 实例在其从创建到销毁的整个过程中的一系列事件，它可以让开发者在实例的不同阶段执行代码。
    // 1.创建阶段
        /**
         * beforeCreate:
         * Vue 实例初始化之后立即调用
         * 此时，数据观测 (data 和 computed 属性等) 和事件还未初始化，无法访问 data、methods 等。
         * 
         * created:
         * 实例已经创建完成，此时已经完成了数据观测、属性和方法的初始化，但还未挂载到 DOM。
         * 在这个阶段可以访问和修改 data，调用 methods，以及操作 computed 和 watch。
         * 例如，可以在这里进行 API 请求，以获取需要的初始数据。
         * */ 
    // 2.挂载阶段
        /**
         * beforeMount：
         * 在挂载开始之前被调用，相关的 render 函数首次被调用。
         * 在这一步，模板编译后的 HTML 还未被渲染到页面上。
         * 
         * mounted：
         * 在挂载完成之后调用。
         * 此时，Vue 实例已经将编译好的模板渲染成了真正的 DOM 元素，可以访问组件的 DOM 元素。
         * 这个阶段常用于进行 DOM 操作，比如初始化第三方插件。
         * */
    // 3.更新阶段
        /**
         * beforeUpdate：
         * 当响应式数据发生变化时，在虚拟 DOM 重新渲染和打补丁之前调用
         * 这个阶段，可以在数据更新之前执行操作。
         * 
         * updated：
         * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
         * 此时组件的 DOM 已经更新，可以执行依赖于 DOM 状态的操作
         * 注意: 尽量避免在此阶段修改数据，这可能导致无限循环更新
         */
    // 4.销毁阶段
        /**
         * beforeDestroy：
         * 在实例销毁之前调用，实例仍然完全可用。
         * 这个阶段适合进行一些清理操作，比如清除计时器、解除事件绑定等。
         * 
         * destroyed：
         * Vue 实例销毁后调用。
         * 调用后，Vue 实例指示的所有绑定和监听都会被移除，子实例也会被销毁。
         * 此时实例已经完全销毁，所有数据和方法都无法再被访问。
         */